说明

本文转自菜鸟教程。

JQuery Fading方法

通过JQuery，您可以实现元素的淡入淡出效果，JQuery拥有以下四种方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

JQuery fadeIn()方法

JQuery fadeIn()方法用于淡入已隐藏的元素，语法如下：

1
$(selector).fadeIn(speed, callback);

可选的speed参数规定效果的时长，可以取以下值：”slow”、”fast”或毫秒，可选的callback参数是fading完成后所执行的函数的名称，例如：

1
2
3
4
5
$("button").click(function() {
  	$("#div1").fadeIn();
	$("#div2").fadeIn("slow");
	$("#div3").fadeIn(3000);
});

JQuery fadeOut()方法

JQuery fadeOut()方法用于淡出可见的元素，语法如下：

1
$(selector).fadeOut(speed, callback);

可选的speed参数规定效果的时长，可以取以下值：”slow”、”fast”或毫秒，可选的callback参数是fading完成后所执行的函数的名称，例如：

1
2
3
4
5
$("button").click(function() {
  	$("#div1").fadeOut();
	$("#div2").fadeOut("slow");
	$("#div3").fadeOut(3000);
});

JQuery fadeToggle()方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果；如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

其语法如下：

1
$(selctor).fadeToggle(speed, callback);

可选的speed参数规定效果的时长，可以取以下值：”slow”、”fast”或毫秒，可选的callback参数是fading完成后所执行的函数的名称，例如：

1
2
3
4
5
$("button").click(function() {
  	$("#div1").fadeToggle();
	$("#div2").fadeToggle("slow");
	$("#div3").fadeToggle(3000);
});

JQuery fadeTo()方法

JQuery fadeTo()方法允许渐变为给定的不透明度（值介于0~1之间），其语法如下：

1
$(selector).fadeTo(speed, opacity, callback);

必须的speed参数规定效果的时长，它可以取以下值：”slow”、”fast”或毫秒，必须的opacity参数将淡入淡出效果设定为给定的不透明度，可选的callback参数是该函数完成后所执行的函数名称，例如：

1
2
3
4
5
$("button").click(function() {
  	$("#div1").fadeTo("slow", 0.15);
	$("#div2").fadeTo("slow", 0.4);	
	$("#div3").fadeTo("slow", 0.7);
});